<!DOCTYPE html>
<html>
<head>
	<title>登录管理后台</title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			background: url(img/bg.jpg) 50% no-repeat fixed;
		    position: relative;
		    height: 100vh;
		    width:100vw;
		    background-size: cover;
		}
		.form-box{
			text-align: center;
			margin-top:300px;
		}
		.form-inner{
			background-color: white;
			display: inline-block;
			padding:30px;
			text-align: right;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
		}
		.input-item,.button-item{
			margin-top:20px;
		}
		input{
			font-size:20px;
		}
		.button-item{
			margin-top:20px;
			text-align: center;
			font-size: 20px;
		}
	</style>
</head>
<body>
<div class="form-box">
	<form class="form-inner">
		<div class="input-item">
			账号：<input type="text" name="username">
		</div>
		<div class="input-item">
			密码：<input type="text" name="password">
		</div>
		<div class="input-item">
			动态码：<input type="text" name="code">
		</div>
		<div class="button-item">
			<input type="button" id="login-btn" value="登录">
		</div>
	</form>
</div>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#login-btn').click(function(e){
			const data = {
				username:$('input[name="username"]').val(),
				password:$('input[name="password"]').val(),
				code:$('input[name="code"]').val(),
			}
			$.post('./check.php',data).then((result)=>{
				console.info('hello',result)
				switch(result.code){
					case 'success':
						alert('登录成功');
					break;
					case 'error':
						alert(result.msg);
				}
			})
		})
	})
</script>
</body>
</html>